/* Sets the light gray background for the area outside the column */
html {
  background-color: #f0f0f0; 
  font-family: sans-serif; /* Adds a cleaner default font */
}

/* Turns the body into a centered, flexible column */
body {
  background-color: #ffffff;
  
  /* Scales flexibly with font size (roughly 100 characters wide) */
  max-width: 100ch; 
  
  /* Scales flexibly with screen size */
  width: 90%; 
  
  /* Centers the column horizontally and adds top/bottom margin */
  margin: 1rem auto; 
  
  /* Adds internal spacing so text doesn't touch the edges */
  padding: 2rem; 
  
  /* Ensures padding is included in the total width calculation */
  box-sizing: border-box; 
  
  /* Optional: Adds a subtle shadow to separate the column from the background */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 
  border-radius: 8px;
}

/* Removes the default top margin from the paragraph inside the navigation bar */
.navigation p {
  margin-top: 0;
}